<template>
    <div class="main">
        <h2>系统管理后台</h2>
        <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" :loading="config.isLoading">
            登录{{ $route.query }}
            </van-button>

            <!-- <router-link to="/about">About</router-link>
            <router-link to="/home">Home</router-link> -->
        </div>
        <!-- <router-view></router-view> -->
        </van-form>
    </div>
</template>

<script>
import { sleep } from "@/utils/tools";
import {reactive, ref} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {useStore} from 'vuex';
import {Form, Field, CellGroup, Button} from 'vant';

export default {
    name: 'Login',
    components: {
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [Form.name]: Form,
        [Button.name]: Button
    },
    setup() {
        const router = useRouter()
        const route = useRoute()
        console.log(router, route, route.params);
        const store = useStore()

        // console.log(store.state.count);
        const username = ref('');
        const password = ref('');
        let isLoading = ref(false);
        let config = reactive({
            isLoading: false
        })

        const onSubmit = async (values) => {
            console.log('submit', values);

            try{
                config.isLoading = true;
                isLoading.value = ref(true);
                console.log('logining');
                // await sleep(30000)
                
                console.log('logining out');
                const data = await store.dispatch('LoginByAccount', values);
                config.isLoading = false;
                isLoading.value = false;
                console.log(data);
            } catch(e) {
                config.isLoading = false;
                isLoading.value = false;
                console.log(e);
                return;
            }
            // await store.LoginByAccount(values);

            // localStorage.setItem('token', JSON.stringify(values));
            router.push({
                path: route.query.redirect || "/"
            });
        };

        // store.commit('increment');
        // store.commit('increment');
        // store.dispatch('add');
        // console.log(store.state.count);

        return {
            isLoading,
            username,
            password,
            onSubmit,
            config
        };
    }
}
</script>

<style>
.main {
    flex-direction: column;
    align-items: center;
    /* margin: 0 auto; */
    justify-content: center;
    display: flex;
    /* transform: translate(0%, 14%); */
    margin-top: 50%;
}
</style>